<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>todo list</title>
    <link rel="stylesheet" href="css/pico.min.css" />

    <style>
        .btn {
            background-color: #007bff;
            color: #fff;
            padding: 0.5rem 1rem;
            border-radius: 0.25rem;
            border: none;
            cursor: pointer;
            font-size: 1rem;
            font-weight: 500;
            text-decoration: none;
            display: inline-block;
            text-align: center;
        }
    </style>
</head>
<body>
    <main class="container">
        <h1>代办事项</h1>
    <p>共 <%= todos.length %> 条代办事项</p>
    <a class="btn" href="/todo-form.html">新建代办事项</a>
    <ul>
        <% for (const todo of todos) { %>
            <li>
                <h2><%= todo.title %></h2>
                <p><%= todo.description %></p>
                <p>优先级：<%= todo.priority %></p>
                <p>创建时间：<%= todo.created_at %></p>
            </li>

        <% } %>

    </ul>
    </main>
    
</body>
</html>